<template>
  <div>
        <el-form :model="addInfo" ref="addArticleRef" :rules="addArticleRules" label-width="100px">
         <el-form-item prop="title" label="文章标题">
          <el-input v-model="addInfo.title"></el-input>
        </el-form-item>
          <el-form-item  label="文章内容:">
            <quill-editor
              v-model="addInfo.articleBody"
              ref="myQuillEditor"
              :options="editorOption"
              @change="onOutContent"
            ></quill-editor>
            <div v-show="isEmptyTool" class="tip">文章内容不可为空</div>
          </el-form-item>
          <el-form-item class="videoURL" label="视频地址:">
            <el-input v-model='addInfo.videoURL' placeholder="输入视频地址"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="footer">
          <el-button @click="AddDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="add">确 定</el-button>
        </div>
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor' // 调用编辑器
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
  data () {
    return {
      addArticleRules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ]
      },
      addInfo: {
        title: '',
        articleBody: '',
        videoURL: ''
      },
      isEmptyTool: false,
      isEmpty: true,
      editorOption: {
        placeholder: '请在这里输入文章内容',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
            [{ list: 'ordered' }, { list: 'bullet' }], // 列表
            ['blockquote', 'code-block'], // 引用，代码块
            ['image', 'link'] // 上传图片、上传视频
          ]
        }
      }
    }
  },
  components: {
    quillEditor
  },
  methods: {
    add () {
      this.$refs.addArticleRef.validate(async valid => {
        if (!valid || this.isEmptyTool) {
          this.isEmptyTool = true
          return this.$message({
            message: '请补全信息',
            type: 'warning'
          })
        }
        this.$emit('addA', this.addInfo)
      })
    },
    onOutContent () {
      if (this.addInfo.articleBody.trim() !== '') {
        this.isEmpty = false
        this.isEmptyTool = false
      } else {
        this.isEmptyTool = true
        this.isEmpty = true
      }
    }
  }
}
</script>

<style scoped lang='less'>
.el-dialog {
    .el-form-item {
      display: block;
    }
    .videoURL{
      position: relative;
      top: 60px;
    }
    .tip{
      width: 100px;
      color: rgb(245, 108, 108);
      position: absolute;
      top: 250px;
      font-size: 12px;
    }
    .quill-editor{
      height: 200px!important;
    }
    .footer{
      position: relative;;
      bottom: -50px;
      height: 70px;
      text-align:right;
    }
  }</style>
